<!--
 * @Author: zheguo 3188606474@qq.com
 * @Date: 2024-03-24 22:08:59
 * @LastEditors: zheguo 3188606474@qq.com
 * @LastEditTime: 2024-04-22 08:25:20
 * @FilePath: \VScode@3.0\echarts\app\src\components\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>

    <!-- 给echarts定义一个容器 -->
    <!-- 容器没有宽高，不会显示 -->
    <div ref="mycharts" id="echh"></div>

</template>

<script>
// 引入echarts模块
import * as echarts from 'echarts';
import axios from 'axios';
import FilterArray from '../../utils/filterArray'
export default {
    data() {
        return {
            datalist: [],
            value: []
        }
    },
    async created() {

        await axios.get("http://localhost:3030/Allin/admin").then(res => {
            this.datalist = res.data

            this.value = FilterArray(this.datalist)

        })

        let myEcharts = echarts.init(this.$refs.mycharts)

        // 设置配置项
        let option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0%',
                left: 'center'
            },
            series: [
                {
                    name: '用户来自于',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: this.value
                }
            ]
        }

        myEcharts.setOption(option)
        console.log(this.datalist)
    },
    mounted() {
        // 初始化
    }
}
</script>
<style>
* {
    margin: 0;
    padding: 0;
}

#echh {
    width: 100%;
    height: 600px;
    margin-top: 10px;
    background: white;
}
</style>